<template>
  <view class="comments">
    <!-- <view class="h">
      <view :class="'item ' + (showType == 0 ? 'active' : '')" @tap="switchTab">
        <view class="txt">全部({{ allCount }})</view>
      </view>
      <view :class="'item ' + (showType == 0 ? '' : 'active')" @tap="switchTab">
        <view class="txt">有图({{ hasPicCount }})</view>
      </view>
    </view> -->
    <view class="b">
      <view class="noDataList" v-if="comments && !comments.length">
        <image class="noDataList1" src="/static/imgs/h16.png"></image>
        <view class="noDataList2">目前还没有任何评价哦～</view>
      </view>
      <view v-for="(item, index) in comments" :key="index" class="item">
        <view class="info">
          <view class="user">
            <image :src="item.userInfo.avatarUrl"></image>
            <text class="comment-user">{{ item.userInfo.nickName }}</text>
            <view class="star">
              <block v-for="(item2, index2) in stars" :key="index2">
                <image src="/static/static/images/icon_collect_checked.png" v-if="item2 <= item.star"></image>
                <image src="/static/static/images/icon_collect.png" v-else></image>
              </block>
            </view>
          </view>
          <view class="time">{{ item.addTime }}</view>
        </view>
        <view class="comment">{{ item.content }}</view>
        <!-- <view class="imgs" v-if="item.picList.length > 0">
          <image v-for="(pitem, index2) in item.picList" :key="index2" class="img" :src="pitem"></image>
        </view> -->
        <view v-for="(ritem, index2) in item.reply" :key="index2" class="customer-service">
          <image :src="ritem.commenter.avatar"></image>
          <text class="comment-user">{{ ritem.commenter.commenterName }}</text>
          <view class="u">
            回复 <text class="comment-user">{{ ritem.replier.commenterName }}</text
            >:{{ ritem.content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp()
let util = require('../../utils/util.js')
let api = require('../../config/api.js')

export default {
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      comments: [],
      allCommentList: [],
      picCommentList: [],
      type: 0,
      valueId: 0,
      showType: 0,
      allCount: 0,
      hasPicCount: 0,
      allPage: 1,
      picPage: 1,
      size: 20,
      stars: 5,
    }
  },

  components: {},
  mounted() {
    this.setData({
      type: this.query.type,
      valueId: this.query.valueId,
    })
    this.getCommentCount()
    this.getCommentList()
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      type: options.type,
      valueId: options.valueId,
    })
    this.getCommentCount()
    this.getCommentList()
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  onReachBottom: function() {
    console.log('onPullDownRefresh')

    if (this.showType == 0) {
      if (this.allCount / this.size < this.allPage) {
        return false
      }

      this.setData({
        allPage: this.allPage + 1,
      })
    } else {
      if (this.hasPicCount / this.size < this.picPage) {
        return false
      }

      this.setData({
        picPage: this.picPage + 1,
      })
    }

    this.getCommentList()
  },
  methods: {
    getCommentCount: function() {
      let that = this
      util
        .request(api.CommentCount, {
          valueId: that.valueId,
          type: that.type,
        })
        .then(function(res) {
          if (res.errno === 0) {
            that.setData({
              allCount: res.data.allCount,
              hasPicCount: res.data.hasPicCount,
            })
          }
        })
    },
    getCommentList: function() {
      let that = this
      util
        .request(api.CommentList, {
          valueId: that.valueId,
          type: that.type,
          size: that.size,
          page: that.showType == 0 ? that.allPage : that.picPage,
          showType: that.showType,
        })
        .then(function(res) {
          if (res.errno === 0) {
            if (that.showType == 0) {
              that.setData({
                allCommentList: that.allCommentList.concat(res.data.data),
                allPage: res.data.currentPage,
                comments: that.allCommentList.concat(res.data.data),
              })
            } else {
              that.setData({
                picCommentList: that.picCommentList.concat(res.data.data),
                picPage: res.data.currentPage,
                comments: that.picCommentList.concat(res.data.data),
              })
            }
          }
        })
    },
    switchTab: function() {
      let that = this

      if (that.showType == 0) {
        that.setData({
          allCommentList: [],
          allPage: 1,
          comments: [],
          showType: 1,
        })
      } else {
        that.setData({
          picCommentList: [],
          picPage: 1,
          comments: [],
          showType: 0,
        })
      }

      this.getCommentList()
    },
  },
}
</script>
<style>
.comments {
  width: 100%;
  height: auto;
  padding-left: 30rpx;
  background: #fff;
  margin: 20rpx 0;
}

.comments .h {
  position: fixed;
  left: 0;
  top: 0; /*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top)); /*  #endif  */
  z-index: 1000;
  width: 100%;
  display: flex;
  background: #fff;
  height: 84rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.comments .h .item {
  display: inline-block;
  height: 82rpx;
  width: 50%;
  padding: 0 15rpx;
  text-align: center;
}

.comments .h .item .txt {
  display: inline-block;
  height: 82rpx;
  padding: 0 20rpx;
  line-height: 82rpx;
  color: #333;
  font-size: 30rpx;
  width: 170rpx;
}

.comments .h .item.active .txt {
  color: #ab2b2b;
  border-bottom: 4rpx solid #ab2b2b;
}

.comments .b {
  /* margin-top: 85rpx; */
  height: auto;
  width: 720rpx;
}

.comments .b.no-h {
  margin-top: 0;
}

.comments .item {
  height: auto;
  width: 720rpx;
  overflow: hidden;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 25rpx;
}

.comments .info {
  height: 127rpx;
  width: 100%;
  padding: 33rpx 0 27rpx 0;
}

.comments .user {
  float: left;
  width: 60%;
  height: 67rpx;
  line-height: 67rpx;
  font-size: 0;
}
.comment-user {
  color: #5a6c95;
  font-weight: bold;
}
.comments .user image {
  float: left;
  width: 67rpx;
  height: 67rpx;
  margin-right: 17rpx;
  border-radius: 50%;
}

.comments .star image {
  float: left;
  width: 35rpx;
  height: 35rpx;
  margin-right: 5rpx;
}

.comments .user .star {
  display: inline-block;
  height: 36rpx;
  font-size: 29rpx;
  line-height: 36rpx;
  float: left;
  margin-left: 80rpx;
  margin-top: -30rpx;
}

.comments .noDataList {
  text-align: center;
  padding-top: 50rpx;
}

.comments .noDataList1 {
  width: 610rpx;
  height: 296rpx;
}

.comments .noDataList2 {
  font-size: 28rpx;
  line-height: 28rpx;
  color: rgba(181, 182, 184, 1);
}

.comments .user text {
  display: inline-block;
  width: 40%;
  height: 36rpx;
  overflow: hidden;
  font-size: 29rpx;
  line-height: 36rpx;
}

.comments .time {
  display: block;
  float: right;
  width: auto;
  height: 67rpx;
  line-height: 67rpx;
  color: #7f7f7f;
  font-size: 25rpx;
  margin-right: 30rpx;
}

.comments .comment {
  width: 720rpx;
  padding-right: 30rpx;
  line-height: 45.8rpx;
  font-size: 29rpx;
  margin-bottom: 16rpx;
}

.comments .imgs {
  width: 720rpx;
  height: 150rpx;
  margin-bottom: 25rpx;
}

.comments .imgs .img {
  height: 150rpx;
  width: 150rpx;
  margin-right: 28rpx;
}

.comments .spec {
  width: 720rpx;
  height: 25rpx;
  font-size: 24rpx;
  color: #999;
}

.comments .spec .item {
  color: #7f7f7f;
  font-size: 25rpx;
}

.comments .customer-service {
  width: 690rpx;
  height: auto;
  overflow: hidden;
  margin-top: 23rpx;
  background: rgba(0, 0, 0, 0.03);
  padding: 21rpx;
}

.comments .customer-service image {
  float: left;
  width: 67rpx;
  height: 67rpx;
  margin-right: 17rpx;
  border-radius: 50%;
}

.comments .customer-service .u {
  font-size: 24rpx;
  color: #333;
  line-height: 37.5rpx;
}

.comments .customer-service .c {
  font-size: 24rpx;
  color: #999;
  line-height: 37.5rpx;
}
</style>
